{include file='common/header'}

<link rel="stylesheet" href="{:HOME_ROOT}/css/member.css"/>

<div id="container">
    <div class="content">

        <div class="head">
            <a href="{:url('Index/index')}">
                <div class="back">
                    <img src="{:HOME_ROOT}/img/back.png" />
                </div>
            </a>
            <div class="pic" v-on:click="chose">
                <img id="avatar" src="{:WEB_ROOT}{if ($info['avatar'])}{$info['avatar']}{else}/img/me.png{/if}" />
                <input v-on:change="upload" type="file" name="avatar" class="hide" />
            </div>
            <div class="user-line">
                <p class="name">{$info.nickname}</p>
            </div>
        </div>

        <ul class="nav">
            <li>
                <div class="border">
                    <a href="{:url('Diary/book')}">日记本</a>
                </div>
            </li>
            <li>
                <div class="border">
                    <a href="{:url('Diary/write')}">写日记</a>
                </div>
            </li>
            <li>
                <div class="border">最近评论</div>
            </li>
            <p class="clear"></p>
        </ul>

        <p class="clear"></p>

        <ul class="info">
            <li><i class="fa fa-user"></i><span>姓名</span></li>
            <li><i class="fa fa-calendar"></i><span>生日</span></li>
            <li><i class="fa fa-at"></i><span>电子邮箱</span></li>
        </ul>

    </div>

    {include file="common/loading"}
    {include file="common/dialog"}

</div>

{include file="common/copyright"}
{include file="common/footer"}

<script language="JavaScript">

    VUEOPT.data.loadingTips = '';

    VUEOPT.methods.chose = function (){
        document.getElementsByName('avatar')[0].click();
    };

    function uploadHandle(e){
        if (e.lengthComputable) {
            var completedPercent = e.loaded / e.total;
            vm.loadingTips = parseInt(completedPercent  * 100) + '%';
        }
    }
    
    function timoutHandle(e) {
        vm.loading = 0;
        vm.dialog = {msg: '请求超时，请重试！'};
    }

    function errorHandle(e) {
        vm.loading = 0;
        vm.dialog = {msg: '请求失败，请重试！'};
    }

    VUEOPT.methods.upload = function(e){
        var fd = new FormData();
        var that = e.target;
        var vue = this;
        fd.append('uid', "{:session('uid')}");
        fd.append('avatar', that.files[0]);
        vue.loading = 1;
        Ajax("{:url('Member/_changeAvatar')}", fd, function (res) {
            vue.loading = 0;
            if(res.status === 1){
                document.getElementById('avatar').src = window.URL.createObjectURL(that.files[0]);
            }
        }, uploadHandle, timoutHandle, errorHandle);
    };

    Loaded(function(){
        vm = new Vue(VUEOPT);
    });

</script>